{% extends 'base_dashboard.html' %}
{% load site_tags %}

{% block title %}My Courses — Online LMS{% endblock %}

{% block extra_css %}
<style>
  .tmc-stat {
    border-radius: .875rem; overflow: hidden;
    border: 0; transition: transform .15s, box-shadow .15s;
  }
  .tmc-stat:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.1) !important; }
  .tmc-stat .ms-accent { height: 3px; }
  .tmc-stat .ms-body { padding: 1rem 1.25rem; display: flex; align-items: center; gap: .875rem; }
  .tmc-stat .ms-icon {
    width: 44px; height: 44px; border-radius: .625rem;
    display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0;
  }
  .mc-filter .mf-btn {
    border-radius: 2rem; padding: .35rem 1rem;
    font-size: .82rem; font-weight: 500; text-decoration: none;
    border: 1.5px solid #e5e7eb; background: #fff; color: #6b7280;
    display: inline-flex; align-items: center; gap: .35rem; transition: all .14s;
  }
  .mc-filter .mf-btn:hover     { background:#f3f4f6; border-color:#d1d5db; color:#374151; }
  .mc-filter .mf-btn.mf-all    { background:#1a56db; color:#fff; border-color:#1a56db; }
  .mc-filter .mf-btn.mf-pub    { background:#dcfce7; color:#15803d; border-color:#bbf7d0; }
  .mc-filter .mf-btn.mf-draft  { background:#f3f4f6; color:#374151; border-color:#d1d5db; }
</style>
{% endblock %}

{% block content %}

<!-- Page Header -->
<div class="d-flex justify-content-between align-items-start mb-4">
    <div>
        <h4 class="fw-bold mb-1">My Courses</h4>
        <p class="text-muted small mb-0">Add, edit, and manage your courses with their modules &amp; lessons</p>
    </div>
    <a href="{% url 'courses:course_create' %}" class="btn btn-primary">
        <i class="bi bi-plus-circle me-1"></i>New Course
    </a>
</div>

<!-- Stats Strip -->
<div class="row g-3 mb-4">
    <div class="col-6 col-md-3">
        <div class="card tmc-stat shadow-sm">
            <div class="ms-accent" style="background:#1a56db;"></div>
            <div class="ms-body">
                <div class="ms-icon" style="background:#eff6ff;">
                    <i class="bi bi-collection-fill" style="color:#1a56db;"></i>
                </div>
                <div>
                    <div class="fw-bold fs-4 lh-1 text-dark">{{ total }}</div>
                    <div class="text-muted" style="font-size:.75rem;">Total Courses</div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="card tmc-stat shadow-sm">
            <div class="ms-accent bg-success"></div>
            <div class="ms-body">
                <div class="ms-icon bg-success bg-opacity-10">
                    <i class="bi bi-check-circle-fill text-success"></i>
                </div>
                <div>
                    <div class="fw-bold fs-4 lh-1 text-dark">{{ published }}</div>
                    <div class="text-muted" style="font-size:.75rem;">Published</div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="card tmc-stat shadow-sm">
            <div class="ms-accent" style="background:#9ca3af;"></div>
            <div class="ms-body">
                <div class="ms-icon" style="background:#f3f4f6;">
                    <i class="bi bi-pencil-square" style="color:#6b7280;"></i>
                </div>
                <div>
                    <div class="fw-bold fs-4 lh-1 text-dark">{{ drafts }}</div>
                    <div class="text-muted" style="font-size:.75rem;">Drafts</div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="card tmc-stat shadow-sm">
            <div class="ms-accent" style="background:#7c3aed;"></div>
            <div class="ms-body">
                <div class="ms-icon" style="background:#f5f3ff;">
                    <i class="bi bi-folder2-fill" style="color:#7c3aed;"></i>
                </div>
                <div>
                    <div class="fw-bold fs-4 lh-1 text-dark">{{ total_modules }}</div>
                    <div class="text-muted" style="font-size:.75rem;">Total Modules</div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Filter Bar -->
<div class="card border-0 shadow-sm rounded-4 mb-4">
    <div class="card-body py-3 px-4">
        <div class="d-flex align-items-center gap-3 flex-wrap">
            <span class="fw-medium small text-muted">Filter:</span>
            <div class="mc-filter d-flex gap-2">
                <a href="{% url 'dashboard:teacher_courses' %}"
                   class="mf-btn {% if not status_filter %}mf-all{% endif %}">
                    <i class="bi bi-grid-3x3-gap"></i>All
                </a>
                <a href="?status=published"
                   class="mf-btn {% if status_filter == 'published' %}mf-pub{% endif %}">
                    <i class="bi bi-check-circle"></i>Published
                </a>
                <a href="?status=draft"
                   class="mf-btn {% if status_filter == 'draft' %}mf-draft{% endif %}">
                    <i class="bi bi-pencil-square"></i>Draft
                </a>
            </div>
            <span class="ms-auto text-muted small">{{ courses|length }} course{{ courses|length|pluralize }} shown</span>
        </div>
    </div>
</div>

<!-- Course Cards -->
{% if courses %}
<div class="accordion" id="coursesAccordion">
{% for course in courses %}
<div class="card border-0 shadow-sm rounded-4 mb-3 overflow-hidden">

    <!-- Course Header Row -->
    <div class="card-body p-0">
        <div class="d-flex align-items-stretch">

            <!-- Thumbnail strip -->
            <div class="flex-shrink-0 d-none d-md-block" style="width:110px;">
                {% if course.thumbnail %}
                    <img src="{{ course.thumbnail.url }}" alt="{{ course.title }}"
                         style="width:110px;height:100%;object-fit:cover;min-height:90px;">
                {% else %}
                    <div class="w-100 h-100 d-flex align-items-center justify-content-center"
                         style="background:linear-gradient(135deg,#dbeafe,#e0f2fe);min-height:90px;">
                        <i class="bi bi-mortarboard" style="font-size:2.5rem;color:#1a56db;opacity:.35;"></i>
                    </div>
                {% endif %}
            </div>

            <!-- Main info -->
            <div class="flex-grow-1 p-3 px-md-4">
                <div class="d-flex flex-wrap align-items-start justify-content-between gap-2">
                    <div class="flex-grow-1" style="min-width:0;">
                        <div class="d-flex align-items-center gap-2 flex-wrap mb-1">
                            <h6 class="fw-bold mb-0 text-truncate" style="max-width:360px;">{{ course.title }}</h6>
                            {% if course.status == 'published' %}
                                <span class="badge rounded-pill" style="background:#dcfce7;color:#15803d;font-size:.72rem;">
                                    <i class="bi bi-circle-fill me-1" style="font-size:.45rem;"></i>Published
                                </span>
                            {% else %}
                                <span class="badge rounded-pill" style="background:#f3f4f6;color:#6b7280;font-size:.72rem;">
                                    <i class="bi bi-circle me-1" style="font-size:.45rem;"></i>Draft
                                </span>
                            {% endif %}
                        </div>
                        <p class="text-muted small mb-2" style="line-height:1.4;">{{ course.short_description|truncatechars:100 }}</p>
                        <!-- Meta chips -->
                        <div class="d-flex flex-wrap gap-2">
                            <span class="d-flex align-items-center gap-1 small text-muted">
                                <i class="bi bi-clock text-primary" style="font-size:.8rem;"></i>{{ course.duration }}
                            </span>
                            <span class="d-flex align-items-center gap-1 small text-muted">
                                <i class="bi bi-folder2" style="font-size:.8rem;color:#7c3aed;"></i>
                                {{ course.modules.count }} module{{ course.modules.count|pluralize }}
                            </span>
                            <span class="d-flex align-items-center gap-1 small text-muted">
                                <i class="bi bi-play-circle text-primary" style="font-size:.8rem;"></i>
                                {{ course.get_lesson_count }} lesson{{ course.get_lesson_count|pluralize }}
                            </span>
                            {% if course.start_date %}
                            <span class="d-flex align-items-center gap-1 small text-muted">
                                <i class="bi bi-calendar-event" style="font-size:.8rem;color:#c2410c;"></i>{{ course.start_date|date:"d M Y" }}
                            </span>
                            {% endif %}
                        </div>
                    </div>

                    <!-- Action buttons -->
                    <div class="d-flex flex-column flex-sm-row gap-2 flex-shrink-0 align-items-end align-items-sm-start">
                        <a href="{% url 'courses:course_detail' slug=course.slug %}"
                           class="btn btn-sm" target="_blank" title="View live page"
                           style="background:#e0f2fe;color:#0369a1;border:none;">
                            <i class="bi bi-eye"></i>
                        </a>
                        <a href="{% url 'courses:course_edit' pk=course.pk %}"
                           class="btn btn-sm" title="Edit course"
                           style="background:#eff6ff;color:#1a56db;border:none;">
                            <i class="bi bi-pencil"></i>
                        </a>
                        <button type="button"
                                class="btn btn-sm"
                                data-bs-toggle="modal"
                                data-bs-target="#deleteCourseModal"
                                data-course-id="{{ course.pk }}"
                                data-course-title="{{ course.title }}"
                                title="Delete course"
                                style="background:#fee2e2;color:#b91c1c;border:none;">
                            <i class="bi bi-trash"></i>
                        </button>
                        <!-- Expand modules toggle -->
                        <button class="btn btn-sm fw-medium px-3"
                                style="background:#f0f4ff;color:#1a56db;border:none;"
                                type="button"
                                data-bs-toggle="collapse"
                                data-bs-target="#modules-{{ course.pk }}"
                                aria-expanded="false">
                            <i class="bi bi-folder2-open me-1"></i>Modules
                            <span class="badge rounded-pill ms-1" style="background:#1a56db;color:#fff;font-size:.7rem;">{{ course.modules.count }}</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Collapsible Modules Panel -->
    <div class="collapse" id="modules-{{ course.pk }}">
        <div class="border-top" style="background:#f8faff;">
            <div class="p-3 px-md-4">

                <!-- Module panel header -->
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <span class="fw-semibold small text-dark">
                        <i class="bi bi-folder2 me-2 text-primary"></i>Modules
                        <span class="text-muted fw-normal">({{ course.modules.count }})</span>
                    </span>
                    <a href="{% url 'courses:module_create' course_pk=course.pk %}"
                       class="btn btn-sm btn-primary">
                        <i class="bi bi-plus me-1"></i>Add Module
                    </a>
                </div>

                {% if course.modules.all %}
                <div class="d-flex flex-column gap-2">
                    {% for module in course.modules.all %}
                    <div class="rounded-3 bg-white border d-flex align-items-center justify-content-between px-3 py-2 gap-2">
                        <div class="d-flex align-items-center gap-3 flex-grow-1 min-w-0">
                            <div class="rounded-2 d-flex align-items-center justify-content-center flex-shrink-0"
                                 style="width:32px;height:32px;background:#ede9fe;">
                                <i class="bi bi-folder2" style="color:#7c3aed;font-size:.85rem;"></i>
                            </div>
                            <div style="min-width:0;">
                                <div class="fw-medium small text-truncate">{{ module.title }}</div>
                                <div class="text-muted" style="font-size:.72rem;">
                                    Order: {{ module.order }}
                                    &nbsp;·&nbsp;
                                    {{ module.lessons.count }} lesson{{ module.lessons.count|pluralize }}
                                </div>
                            </div>
                        </div>
                        <div class="d-flex gap-2 flex-shrink-0">
                            <a href="{% url 'courses:lesson_create' module_pk=module.pk %}"
                               class="btn btn-sm" style="background:#f0fdf4;color:#15803d;border:none;font-size:.78rem;"
                               title="Add lesson to this module">
                                <i class="bi bi-plus me-1"></i>Add Lesson
                            </a>
                            <a href="{% url 'courses:module_edit' pk=module.pk %}"
                               class="btn btn-sm" title="Edit module"
                               style="background:#eff6ff;color:#1a56db;border:none;">
                                <i class="bi bi-pencil" style="font-size:.8rem;"></i>
                            </a>
                            <button type="button"
                                    class="btn btn-sm"
                                    data-bs-toggle="modal"
                                    data-bs-target="#deleteModuleModal"
                                    data-module-id="{{ module.pk }}"
                                    data-module-title="{{ module.title }}"
                                    data-course-title="{{ course.title }}"
                                    title="Delete module"
                                    style="background:#fee2e2;color:#b91c1c;border:none;">
                                <i class="bi bi-trash" style="font-size:.8rem;"></i>
                            </button>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <div class="text-center py-4 text-muted small rounded-3 bg-white border"
                     style="border-style:dashed !important;">
                    <i class="bi bi-folder-plus d-block mb-1" style="font-size:1.8rem;opacity:.35;"></i>
                    No modules yet. <a href="{% url 'courses:module_create' course_pk=course.pk %}" class="text-primary">Add the first module</a>
                </div>
                {% endif %}

            </div>
        </div>
    </div>

</div>
{% endfor %}
</div>

{% else %}
<!-- Empty state -->
<div class="card border-0 shadow-sm rounded-4">
    <div class="card-body text-center py-5 my-2">
        <div class="rounded-circle d-inline-flex align-items-center justify-content-center mb-4"
             style="width:90px;height:90px;background:#eff6ff;">
            <i class="bi bi-collection" style="font-size:2.5rem;color:#1a56db;opacity:.5;"></i>
        </div>
        <h5 class="text-muted fw-semibold mb-2">No courses found</h5>
        <p class="text-muted small mb-4">
            {% if status_filter %}No {{ status_filter }} courses. <a href="{% url 'dashboard:teacher_courses' %}">Clear filter</a>{% else %}Get started by creating your first course.{% endif %}
        </p>
        <a href="{% url 'courses:course_create' %}" class="btn btn-primary px-4">
            <i class="bi bi-plus-circle me-2"></i>Create First Course
        </a>
    </div>
</div>
{% endif %}

<!-- Delete Course Modal -->
<div class="modal fade" id="deleteCourseModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content rounded-4 border-0 shadow">
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title fw-bold">
                    <i class="bi bi-exclamation-triangle-fill text-danger me-2"></i>Delete Course
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body pt-2">
                <p class="text-muted mb-0">Are you sure you want to delete <strong id="deleteCourseTitle"></strong>?
                This will permanently remove the course, all its modules, lessons, and enrollment records.</p>
            </div>
            <div class="modal-footer border-0 pt-0">
                <button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
                <form id="deleteCourseForm" method="post" action="">
                    {% csrf_token %}
                    <button type="submit" class="btn btn-danger btn-sm">Delete Course</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Delete Module Modal -->
<div class="modal fade" id="deleteModuleModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content rounded-4 border-0 shadow">
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title fw-bold">
                    <i class="bi bi-exclamation-triangle-fill text-warning me-2"></i>Delete Module
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body pt-2">
                <p class="text-muted mb-1">Delete module <strong id="deleteModuleTitle"></strong> from <strong id="deleteModuleCourse"></strong>?</p>
                <p class="text-muted small mb-0">All lessons in this module will also be deleted.</p>
            </div>
            <div class="modal-footer border-0 pt-0">
                <button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
                <form id="deleteModuleForm" method="post" action="">
                    {% csrf_token %}
                    <button type="submit" class="btn btn-danger btn-sm">Delete Module</button>
                </form>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block extra_js %}
<script>
document.getElementById('deleteCourseModal').addEventListener('show.bs.modal', function (event) {
    const btn = event.relatedTarget;
    document.getElementById('deleteCourseTitle').textContent = btn.getAttribute('data-course-title');
    document.getElementById('deleteCourseForm').action = '/courses/' + btn.getAttribute('data-course-id') + '/delete/';
});

document.getElementById('deleteModuleModal').addEventListener('show.bs.modal', function (event) {
    const btn = event.relatedTarget;
    document.getElementById('deleteModuleTitle').textContent = btn.getAttribute('data-module-title');
    document.getElementById('deleteModuleCourse').textContent = btn.getAttribute('data-course-title');
    document.getElementById('deleteModuleForm').action = '/courses/modules/' + btn.getAttribute('data-module-id') + '/delete/';
});
</script>
{% endblock %}